import { login, NavSearch, Search, queryString } from './tools.js'
import { APIGoodsDetail, APICartAdd } from './fetch.js';

$('.footer').load('../../layout/footer.html');
$('.header').load('../../layout/header.html', function () {
    login();
    NavSearch();
    Search();
    $('.foot-w').hide();
    
    $('.cart').click(function(){
        location.href='../../html/cart.html'
      })

})


let gid = queryString('gid')

APIGoodsDetail({
    gid
}).then(({ data: { gname, price, img, imgs, detail } }) => {
    // console.log(data);
    $('.p-name').text(gname);
    $('.p-info-item .info').text(price);
    $('.main-img-con .main-img').attr('src', img);

    let html = '';
    // console.log(imgs);
    $.each($.parseJSON(imgs), (index, item) => {
        html += `
        <li class="p-img-item">
        <img class="p-img" src="${item}" alt="{{name}}">
         </li>
        `
    });

    $('.p-img-list').html(html);
    $('.detail-con').html(detail);
})


// 图片预览
$(document).on('mouseenter', '.p-img-item', function () {
    let imageUrl = $(this).find('.p-img').attr('src');
    // console.log(imageUrl);
    $('.main-img').attr('src', imageUrl);

});

let maxWidth, maxHeight;

// 放大镜
$(document).on('mousemove', '.main-img-con', function (e) {

    let x = e.pageX - $('.detailBox')[0].offsetLeft - $('.goods-shadow')[0].clientWidth / 2;
    let y = e.pageY - $('.detailBox')[0].offsetTop - $('.goods-shadow')[0].clientHeight / 2;


    if (x < 0) {
        x = 0;
    }
    if (y < 0) {
        y = 0;
    }
    if (x > maxWidth) {
        x = maxWidth;
    }
    if (y > maxHeight) {
        y = maxHeight;
    }

    // 求比列
    let scale = $('.main-img-con')[0].clientWidth / $('.goods-shadow')[0].clientWidth;
    console.log(scale);

    // 同步到页面上
    $('.goods-shadow').css({
        "left": x + "px",
        "top": y + "px"
    })

    // bigImg 等比例 反向移动
    $('.bigImg').css({
        "left": -(x * scale) + "px",
        "top": -(y * scale) + "px"
    })
})

//鼠标移入，shadow出现
$(document).on('mouseenter', '.main-img-con', function () {
    $('.goods-shadow').css({
        "display": "block"
    })

    $('.magnifyBox').css({
        "display": "block",
    });

    // shadow显示之后取值
    maxWidth = $('.main-img-con')[0].offsetWidth - $('.goods-shadow')[0].offsetWidth;
    maxHeight = $('.main-img-con')[0].offsetHeight - $('.goods-shadow')[0].offsetHeight;

})

//鼠标移出
$(document).on('mouseleave', '.main-img-con', function () {
    console.log("鼠标移出");
    $('.goods-shadow').css({
        "display": "none"
    })

    $('.magnifyBox').css({
        "display": "none",
    });
})


// 图片滑入主图，放大镜出现
$(document).on('mouseenter', '.main-img-con', function () {
    let magnifyImgUrl = $(this).find('.main-img').attr('src');
    console.log('放大镜url', magnifyImgUrl);
    $('.magnifyBox .magnify-img').attr('src', magnifyImgUrl);
})

let count = 1;
$('.plus').click(function () {
    $(this).parent().find('.p-count').val(++count)
})

$('.minus').click(function () {
    if (count <= 1) {
        count = 2;
    }
    $(this).parent().find('.p-count').val(--count)
})



$('.cart-add').click(function () {

    // 判断登录
    var username = sessionStorage.login_user;

    if (username) {
        APICartAdd({
            username,
            gid,
            img: $('.main-img-con .main-img').attr('src'),
            price: $('.p-price-con .info').text(),
            count,
            gname: $('.p-name').text(),
        }).then(({ code }) => {
            if (code) {
                layer.msg('添加购物车成功');
            } else {
                layer.msg('添加购物车成功');
            }
        })
    } else {
        layer.confirm('请登录后添加商品，立即登录？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            sessionStorage.loginBack = location.href;
            location.href = '../../html/login.html';
        }, function () {
            return;
        });
    }
});

